<template>
  <div class="home-container">
    <!-- <div class="welcome-section">
      <div class="welcome-content">
        <h3 class="welcome-title">欢迎使用《一帆晴远》后台管理系统</h3>
      </div>
        </div> -->

    <h2>收入同比</h2>
    <!-- 收入统计板块 -->
    <div class="income-stats-grid">
      <div class="income-stat-card">
        <div class="income-stat-label">日总收入</div>
        <div class="income-stat-value">¥{{ dayIncome.toFixed(2) }}</div>
        <div class="income-stat-label">比昨日</div>
        <div
          class="income-stat-value"
          :class="{
            'income-up': dayIncomeCompare > 0,
            'income-down': dayIncomeCompare < 0,
          }"
        >
          <span v-if="dayIncomeCompare > 0"
            >+{{ dayIncomeCompare.toFixed(2) }}</span
          >
          <span v-else>{{ dayIncomeCompare.toFixed(2) }}</span>
        </div>
      </div>
      <div class="income-stat-card">
        <div class="income-stat-label">周总收入</div>
        <div class="income-stat-value">¥{{ weekIncome.toFixed(2) }}</div>
        <div class="income-stat-label">比上周</div>
        <div
          class="income-stat-value"
          :class="{
            'income-up': weekIncomeCompare > 0,
            'income-down': weekIncomeCompare < 0,
          }"
        >
          <span v-if="weekIncomeCompare > 0"
            >+{{ weekIncomeCompare.toFixed(2) }}</span
          >
          <span v-else>{{ weekIncomeCompare.toFixed(2) }}</span>
        </div>
      </div>
      <div class="income-stat-card">
        <div class="income-stat-label">月总收入</div>
        <div class="income-stat-value">¥{{ monthIncome.toFixed(2) }}</div>
        <div class="income-stat-label">比上月</div>
        <div
          class="income-stat-value"
          :class="{
            'income-up': monthIncomeCompare > 0,
            'income-down': monthIncomeCompare < 0,
          }"
        >
          <span v-if="monthIncomeCompare > 0"
            >+{{ monthIncomeCompare.toFixed(2) }}</span
          >
          <span v-else>{{ monthIncomeCompare.toFixed(2) }}</span>
        </div>
      </div>
      <div class="income-stat-card">
        <div class="income-stat-label">年总收入</div>
        <div class="income-stat-value">¥{{ yearIncome.toFixed(2) }}</div>
        <div class="income-stat-label">比去年</div>
        <div
          class="income-stat-value"
          :class="{
            'income-up': yearIncomeCompare > 0,
            'income-down': yearIncomeCompare < 0,
          }"
        >
          <span v-if="yearIncomeCompare > 0"
            >+{{ yearIncomeCompare.toFixed(2) }}</span
          >
          <span v-else>{{ yearIncomeCompare.toFixed(2) }}</span>
        </div>
      </div>
    </div>

    <div class="trend-chart">
      <h2>收入走势</h2>
      <div class="trend-toolbar">
        <span>天数：</span>
        <el-select
          v-model="trendDays"
          @change="handleTrendDaysChange"
          style="width: 90px"
        >
          <el-option
            v-for="n in [7, 14, 30]"
            :key="n"
            :label="n + '天'"
            :value="n"
          />
        </el-select>
      </div>
      <div id="income-trend-chart" class="trend-echart"></div>
    </div>

    <div class="payment-type-percent">
      <h2>支付方式饼图（过去30天内）</h2>
      <div style="display: flex; gap: 32px; flex-wrap: wrap">
        <div style="flex: 1; min-width: 320px">
          <div style="text-align: center; font-weight: 600; margin-bottom: 8px">
            支付笔数占比
          </div>
          <div
            id="payment-type-pie-count"
            style="width: 100%; height: 320px"
          ></div>
        </div>
        <div style="flex: 1; min-width: 320px">
          <div style="text-align: center; font-weight: 600; margin-bottom: 8px">
            支付金额占比
          </div>
          <div
            id="payment-type-pie-amount"
            style="width: 100%; height: 320px"
          ></div>
        </div>
      </div>
    </div>

    <div class="quick-actions">
      <h2 class="section-title">快速操作</h2>
      <div class="actions-grid">
        <router-link to="/user-management" class="action-card">
          <div class="action-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
              />
            </svg>
          </div>
          <h3>用户管理</h3>
          <p>管理系统用户信息</p>
        </router-link>

        <router-link to="/role-management" class="action-card">
          <div class="action-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
              />
            </svg>
          </div>
          <h3>角色管理</h3>
          <p>配置用户角色权限</p>
        </router-link>

        <router-link to="/menu-management" class="action-card">
          <div class="action-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"
              />
            </svg>
          </div>
          <h3>菜单管理</h3>
          <p>管理系统菜单结构</p>
        </router-link>

        <router-link to="/revenue-list" class="action-card">
          <div class="action-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"
              />
            </svg>
          </div>
          <h3>每日营业</h3>
          <p>营业收入明细记录</p>
        </router-link>
      </div>
    </div>

    <div class="recent-activity">
      <h2 class="section-title">最近活动</h2>
      <div class="activity-list">
        <div class="activity-item">
          <div class="activity-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
              />
            </svg>
          </div>
          <div class="activity-content">
            <h4>新用户注册</h4>
            <p>用户 "张三" 完成了注册</p>
            <div class="activity-time">2分钟前</div>
          </div>
        </div>

        <div class="activity-item">
          <div class="activity-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
              />
            </svg>
          </div>
          <div class="activity-content">
            <h4>角色权限更新</h4>
            <p>管理员角色权限已更新</p>
            <div class="activity-time">15分钟前</div>
          </div>
        </div>

        <div class="activity-item">
          <div class="activity-icon">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"
              />
            </svg>
          </div>
          <div class="activity-content">
            <h4>产品信息修改</h4>
            <p>产品 "示例产品" 信息已更新</p>
            <div class="activity-time">1小时前</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { getWithAuth } from "@/utils/request";
import * as echarts from "echarts";

const dayIncome = ref(0);
const dayIncomeCompare = ref(0);
const weekIncome = ref(0);
const weekIncomeCompare = ref(0);
const monthIncome = ref(0);
const monthIncomeCompare = ref(0);
const yearIncome = ref(0);
const yearIncomeCompare = ref(0);

const trendDays = ref(7);
const trendData = ref<{ date: string; income: number }[]>([]);
let trendChart: any = null;

const paymentTypeData = ref<any[]>([]);
let paymentTypeChartCount: any = null;
let paymentTypeChartAmount: any = null;

async function fetchIncomeStats() {
  try {
    const res = await getWithAuth("/internal/revenueRecord/revenueStatistics");
    if (res.code === 0 && res.data) {
      dayIncome.value = res.data.todayIncome || 0;
      dayIncomeCompare.value = res.data.comparedWithYesterdayIncome || 0;
      weekIncome.value = res.data.weeklyIncome || 0;
      weekIncomeCompare.value = res.data.comparedWithLastWeekIncome || 0;
      monthIncome.value = res.data.monthlyIncome || 0;
      monthIncomeCompare.value = res.data.comparedWithLastMonthIncome || 0;
      yearIncome.value = res.data.yearlyIncome || 0;
      yearIncomeCompare.value = res.data.comparedWithLastYearIncome || 0;
    } else {
      ElMessage.error(res.message || "收入统计获取失败");
    }
  } catch (e) {
    ElMessage.error("收入统计获取异常");
  }
}

async function fetchTrendData() {
  try {
    const res = await getWithAuth(
      `/internal/revenueRecord/last-n-days?days=${trendDays.value}`
    );
    if (Array.isArray(res)) {
      trendData.value = res;
    } else if (res.code === 0 && Array.isArray(res.data)) {
      trendData.value = res.data;
    } else {
      trendData.value = [];
    }
    await nextTick();
    renderTrendChart();
  } catch (e) {
    trendData.value = [];
  }
}

async function fetchPaymentTypeData() {
  try {
    const res = await getWithAuth(
      "/internal/revenueRecord/payment-type/last-30days"
    );
    if (res.code === 0 && Array.isArray(res.data)) {
      paymentTypeData.value = res.data;
      await nextTick();
      renderPaymentTypeCharts();
    } else {
      paymentTypeData.value = [];
      ElMessage.error(res.message || "支付方式数据获取失败");
    }
  } catch (e) {
    paymentTypeData.value = [];
    ElMessage.error("支付方式数据获取异常");
  }
}

function renderTrendChart() {
  const dom = document.getElementById("income-trend-chart");
  if (!dom) return;
  // 销毁旧实例，防止多次初始化导致报错
  if (trendChart) {
    trendChart.dispose();
    trendChart = null;
  }
  trendChart = echarts.init(dom);
  const dates = trendData.value.map((item) => item.date);
  const incomes = trendData.value.map((item) => item.income);
  trendChart.setOption({
    tooltip: { trigger: "axis" },
    grid: { left: 40, right: 20, top: 30, bottom: 30 },
    xAxis: {
      type: "category",
      data: dates,
      axisLabel: { color: "#718096", fontSize: 13 },
    },
    yAxis: {
      type: "value",
      axisLabel: { color: "#718096", fontSize: 13 },
      splitLine: { lineStyle: { color: "#e2e8f0" } },
    },
    series: [
      {
        data: incomes,
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        lineStyle: { color: "#667eea", width: 3 },
        itemStyle: { color: "#667eea" },
        areaStyle: { color: "rgba(102,126,234,0.08)" },
      },
    ],
  });
  trendChart.resize();
}

function renderPaymentTypeCharts() {
  // 支付笔数饼图
  const domCount = document.getElementById("payment-type-pie-count");
  if (domCount) {
    if (paymentTypeChartCount) {
      paymentTypeChartCount.dispose();
      paymentTypeChartCount = null;
    }
    paymentTypeChartCount = echarts.init(domCount);
    paymentTypeChartCount.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c}笔 ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: 10,
        top: 30,
        data: paymentTypeData.value.map((item) => item.paymentType),
      },
      series: [
        {
          name: "支付方式",
          type: "pie",
          radius: "60%",
          center: ["55%", "50%"],
          data: paymentTypeData.value.map((item) => ({
            name: item.paymentType,
            value: item.transactionCount,
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.2)",
            },
          },
          label: {
            formatter: "{b}: {d}%",
          },
        },
      ],
    });
    paymentTypeChartCount.resize();
  }
  // 支付金额饼图
  const domAmount = document.getElementById("payment-type-pie-amount");
  if (domAmount) {
    if (paymentTypeChartAmount) {
      paymentTypeChartAmount.dispose();
      paymentTypeChartAmount = null;
    }
    paymentTypeChartAmount = echarts.init(domAmount);
    paymentTypeChartAmount.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{b}: ￥{c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: 10,
        top: 30,
        data: paymentTypeData.value.map((item) => item.paymentType),
      },
      series: [
        {
          name: "支付方式",
          type: "pie",
          radius: "60%",
          center: ["55%", "50%"],
          data: paymentTypeData.value.map((item) => ({
            name: item.paymentType,
            value: item.totalAmount,
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.2)",
            },
          },
          label: {
            formatter: "{b}: {d}%",
          },
        },
      ],
    });
    paymentTypeChartAmount.resize();
  }
}

function handleTrendDaysChange(val: number) {
  trendDays.value = val;
  fetchTrendData();
}

onMounted(() => {
  fetchIncomeStats();
  fetchTrendData();
  fetchPaymentTypeData();
});

onBeforeUnmount(() => {
  if (trendChart) {
    trendChart.dispose();
    trendChart = null;
  }
  if (paymentTypeChartCount) {
    paymentTypeChartCount.dispose();
    paymentTypeChartCount = null;
  }
  if (paymentTypeChartAmount) {
    paymentTypeChartAmount.dispose();
    paymentTypeChartAmount = null;
  }
});
</script>

<style scoped>
.home-container {
  padding: 24px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .welcome-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 32px;
  color: white;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
} */

/* .welcome-content {
  text-align: center;
} */

/* .welcome-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
  letter-spacing: -0.5px;
} */

/* .welcome-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin: 0 0 32px 0;
} */

.user-info-display {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-info-display p {
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.test-buttons {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.test-buttons .el-button {
  min-width: 120px;
}

.test-btn {
  min-width: 120px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 24px 0;
}

.quick-actions {
  margin-bottom: 32px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.action-card {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-decoration: none;
  color: inherit;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.action-card:hover {
  transform: translateY(-4px);
  border-color: #667eea;
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
}

.action-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.action-icon svg {
  width: 32px;
  height: 32px;
  color: white;
}

.action-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.action-card p {
  color: #718096;
  margin: 0;
  font-size: 14px;
}

.recent-activity {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #f7fafc;
  transition: background-color 0.3s ease;
}

.activity-item:hover {
  background: #edf2f7;
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: #667eea;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

.activity-content {
  flex: 1;
}

.activity-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 4px 0;
}

.activity-content p {
  color: #718096;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.activity-time {
  font-size: 12px;
  color: #a0aec0;
}

.income-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
}
.income-stat-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
  border-radius: 16px;
  padding: 28px 18px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
  border: 1px solid #e2e8f0;
}
.income-stat-label {
  font-size: 16px;
  color: #667eea;
  margin-bottom: 10px;
  font-weight: 500;
}
.income-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
}
.income-stat-value.income-up {
  color: #27ae60;
}
.income-stat-value.income-down {
  color: #e53e3e;
}

.trend-chart {
  background: white;
  border-radius: 16px;
  padding: 24px 24px 12px 24px;
  margin-bottom: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}
.trend-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.trend-echart {
  width: 100%;
  height: 320px;
  min-height: 220px;
}

/* 平板端适配 */
@media (max-width: 1024px) {
  .home-container {
    padding: 20px;
  }

  .welcome-section {
    padding: 32px;
  }

  .welcome-title {
    font-size: 28px;
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .action-card {
    padding: 28px 20px;
  }

  .recent-activity {
    padding: 28px;
  }

  .income-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .income-stat-card {
    padding: 20px 10px 14px 10px;
  }
  .income-stat-value {
    font-size: 22px;
  }
  .trend-echart {
    height: 220px;
  }
}

/* 手机端适配 */
@media (max-width: 768px) {
  .home-container {
    padding: 16px;
  }

  .welcome-section {
    padding: 24px;
    border-radius: 16px;
  }

  .welcome-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .welcome-subtitle {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .stat-card {
    padding: 20px;
    border-radius: 12px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
  }

  .stat-icon svg {
    width: 20px;
    height: 20px;
  }

  .stat-number {
    font-size: 24px;
  }

  .stat-label {
    font-size: 13px;
  }

  .section-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .actions-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .action-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .action-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }

  .action-icon svg {
    width: 28px;
    height: 28px;
  }

  .action-card h3 {
    font-size: 16px;
  }

  .action-card p {
    font-size: 13px;
  }

  .recent-activity {
    padding: 24px;
    border-radius: 12px;
  }

  .activity-list {
    gap: 16px;
  }

  .activity-item {
    padding: 12px;
    border-radius: 10px;
  }

  .activity-icon {
    width: 36px;
    height: 36px;
  }

  .activity-icon svg {
    width: 18px;
    height: 18px;
  }

  .activity-content h4 {
    font-size: 15px;
  }

  .activity-content p {
    font-size: 13px;
  }

  .income-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .income-stat-card {
    padding: 14px 6px 10px 6px;
    border-radius: 10px;
  }
  .income-stat-label {
    font-size: 13px;
  }
  .income-stat-value {
    font-size: 16px;
  }
  .trend-echart {
    height: 160px;
    min-height: 120px;
  }
}

/* 小屏手机适配 */
@media (max-width: 480px) {
  .home-container {
    padding: 12px;
  }

  .welcome-section {
    padding: 20px;
    border-radius: 12px;
  }

  .welcome-title {
    font-size: 20px;
  }

  .welcome-subtitle {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .stats-grid {
    margin-top: 20px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-icon {
    width: 36px;
    height: 36px;
  }

  .stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .stat-number {
    font-size: 20px;
  }

  .section-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .action-card {
    padding: 20px 16px;
  }

  .action-icon {
    width: 48px;
    height: 48px;
  }

  .action-icon svg {
    width: 24px;
    height: 24px;
  }

  .recent-activity {
    padding: 20px;
  }

  .activity-item {
    padding: 10px;
  }

  .activity-icon {
    width: 32px;
    height: 32px;
  }

  .activity-icon svg {
    width: 16px;
    height: 16px;
  }

  .income-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 横屏手机适配 */
@media (max-height: 500px) and (orientation: landscape) {
  .home-container {
    padding: 12px;
  }

  .welcome-section {
    padding: 16px;
    margin-bottom: 20px;
  }

  .welcome-title {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .welcome-subtitle {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
  }

  .stat-number {
    font-size: 16px;
  }

  .stat-label {
    font-size: 11px;
  }

  .section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .action-card {
    padding: 16px 12px;
  }

  .action-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .action-icon svg {
    width: 20px;
    height: 20px;
  }

  .action-card h3 {
    font-size: 14px;
  }

  .action-card p {
    font-size: 11px;
  }
}
</style>
